function Pagination(ele,obj,cb){
    //创建实例属性
    this.ele=ele
    this.obj=obj || {}
    this.cb=cb || function(){}
    
    //设置默认参数
    this.default={
        pageInfo:{
            pagenum:1,
            pagesize:10,
            totalsize:200,
            totalpage:20
        },
        textInfo:{
            first:'first',
            prev:"prev",
            list:'',
            next:'next',
            last:'last'
        }
    }
    this.list=null  //存放页码的属性
    //调用入口函数
    this.init()
}
//创建入口函数
Pagination.prototype.init=function(){
    //调用替换默认参数的方法
    this.update1()
    //显示所有信息
    this.show1()
    //给大盒子对象绑定点击事件
    this.docidaci()
}
//创建替换默认参数的函数
Pagination.prototype.update1=function(){
    //判断实参中是否有pageinfo信息 
    if(this.obj.pageInfo){
        //遍历实参中的pageinfo对象
        for(var attr in this.obj.pageInfo){
            //使用实参中的数据去替换默认参数中的数据
            this.default.pageInfo[attr]=this.obj.pageInfo[attr]
        }
    }
    if(this.obj.textInfo){
        for(var attr in this.obj.textInfo){
            this.default.textInfo[attr]=this.obj.textInfo[attr]
        }
    }
}

//显示所有信息
Pagination.prototype.show1=function(){
    //清空当前盒子中所有内容
    this.ele.innerHTML=''
    //显示文本信息
    this.showText()
    //显示页码信息
    this.showP()
    //禁用按钮
    this.disableBtn()
    //添加输入框和按钮
    this.createBtn()
    //调用回调函数
    this.cb(this.default.pageInfo.pagenum)
}
//添加输入框
Pagination.prototype.createBtn=function(){
    //获取当前页码
    var pagenum=this.default.pageInfo.pagenum
    //创建输入框对象
    var inp=document.createElement("input")
    //给输入框添加value属性值
    inp.value=pagenum
    //给输入框对象设置样式
    styleCss(inp,{
        width:"30px",
        padding:"6px",
        marginLeft:'6px'
    })
    //把输入框追加到大盒子中
    this.ele.appendChild(inp)

    //创建按钮对象
    var btn=document.createElement("button")
    btn.innerHTML="GO"
    styleCss(btn,{
        padding:"4px",
        margin:"6px"
    })
    this.ele.appendChild(btn)

}
//禁用按钮
Pagination.prototype.disableBtn=function(){
    //获取大盒子中的小盒子对象
    var divs=this.ele.children
    //获取当前页码和最大页码
    var pagenum=this.default.pageInfo.pagenum
    var totalpage=this.default.pageInfo.totalpage
    //判断当前页码是否等于1
    if(pagenum==1){
        divs[0].style.backgroundColor="#eee"
        divs[1].style.backgroundColor="#eee"
    }
    if(pagenum==totalpage){
        divs[3].style.backgroundColor="#eee"
        divs[4].style.backgroundColor="#eee"
    }
}
//显示页码信息
Pagination.prototype.showP=function(){
    //获取当前页码和最大页数
    var pagenum=this.default.pageInfo.pagenum
    var totalpage=this.default.pageInfo.totalpage
    //判断最大页码是否小于10
    if(totalpage<10){
        for(var i=1;i<=totalpage;i++){
            //创建p标签
            var p1=createP(i,pagenum)
            //把当前p标签对象追加到div中
            this.list.appendChild(p1)
        }
    }else{
        //判断当前页是否小于5
        if(pagenum<5){
            //前面5页
            for(var i=1;i<=5;i++){
                //创建p标签
                var p1=createP(i,pagenum)
                //把当前p标签对象追加到div中
                this.list.appendChild(p1)
            }
            //中间...
            var span=document.createElement("span")
            span.innerHTML="..."
            //把span标签追加到div对象中
            this.list.appendChild(span)
            //最后显示2页
            for(var i=totalpage-1;i<=totalpage;i++){
                 //创建p标签
                 var p1=createP(i,pagenum)
                 //把当前p标签对象追加到div中
                 this.list.appendChild(p1)
            }
        }else if(pagenum==5){
            //前面7页
            for(var i=1;i<=7;i++){
                //创建p标签
                var p1=createP(i,pagenum)
                //把当前p标签对象追加到div中
                this.list.appendChild(p1)
            }
            //中间...
            var span=document.createElement("span")
            span.innerHTML="..."
            //把span标签追加到div对象中
            this.list.appendChild(span)
            //最后显示2页
            for(var i=totalpage-1;i<=totalpage;i++){
                 //创建p标签
                 var p1=createP(i,pagenum)
                 //把当前p标签对象追加到div中
                 this.list.appendChild(p1)
            }
        }else if(pagenum>5 && pagenum<totalpage-4){
            //前面2页
            for(var i=1;i<=2;i++){
                //创建p标签
                var p1=createP(i,pagenum)
                //把当前p标签对象追加到div中
                this.list.appendChild(p1)
            }
            //中间...
            var span=document.createElement("span")
            span.innerHTML="..."
            //把span标签追加到div对象中
            this.list.appendChild(span)
            //中间5页
            for(var i=pagenum-2;i<=pagenum+2;i++){
                //创建p标签
                var p1=createP(i,pagenum)
                //把当前p标签对象追加到div中
                this.list.appendChild(p1)
            }
            //后面...
            var span=document.createElement("span")
            span.innerHTML="..."
            //把span标签追加到div对象中
            this.list.appendChild(span)
            //最后2页
            for(var i=totalpage-1;i<=totalpage;i++){
                 //创建p标签
                 var p1=createP(i,pagenum)
                 //把当前p标签对象追加到div中
                 this.list.appendChild(p1)
            }
        }else if(pagenum==totalpage-4){
             //前面2页
             for(var i=1;i<=2;i++){
                //创建p标签
                var p1=createP(i,pagenum)
                //把当前p标签对象追加到div中
                this.list.appendChild(p1)
            }
            //中间...
            var span=document.createElement("span")
            span.innerHTML="..."
            //把span标签追加到div对象中
            this.list.appendChild(span)
            //最后7页
            for(var i=totalpage-6;i<=totalpage;i++){
                //创建p标签
                var p1=createP(i,pagenum)
                //把当前p标签对象追加到div中
                this.list.appendChild(p1)
            }
        }else if(pagenum>totalpage-4){
             //前面2页
             for(var i=1;i<=2;i++){
                //创建p标签
                var p1=createP(i,pagenum)
                //把当前p标签对象追加到div中
                this.list.appendChild(p1)
            }
            //中间...
            var span=document.createElement("span")
            span.innerHTML="..."
            //把span标签追加到div对象中
            this.list.appendChild(span)
            //最后5页
            for(var i=totalpage-4;i<=totalpage;i++){
                //创建p标签
                var p1=createP(i,pagenum)
                //把当前p标签对象追加到div中
                this.list.appendChild(p1)
            }
        }
    }
}
//显示文本信息
Pagination.prototype.showText=function(){
    //获取默认参数中的所有文本信息
    var textInfo=this.default.textInfo
    //遍历每个键值对
    for(var attr in textInfo){
        //创建元素节点，用来存放文本内容
        var div1=document.createElement('div')
        //给当前div对象添加class属性值
        div1.className=attr
        //判断当前遍历出来的内容是否为list
        if(attr==="list"){
            //把存放页码的div对象赋值给this.list属性
            this.list=div1
            //给当前div对象设置样式
            styleCss(div1,{
                display: "flex",
                justifyContent: "center",
                alignItems: "center"
            })
        }else{
            //给当前元素添加文本
            div1.innerHTML=textInfo[attr]
            styleCss(div1,{
                "border":"1px solid #eee",
                "padding":"8px",
                "margin":"4px"
            })
        }
        //把创建好的div对象追加到大盒子中
        this.ele.appendChild(div1)
    }
}
//创建页码标签
function createP(i,m){
    //创建p标签
    var p=document.createElement("p")
    //给p标签添加页码信息
    p.innerHTML=i
    //给p标签设置样式
    styleCss(p,{
        "border":"1px solid #eee",
        "padding":"8px 12px",
        "margin":"4px"
    })
    //判断当前m页码是否等于遍历出来的i页码
    if(i==m){
        styleCss(p,{
            "backgroundColor":"#f3bf19",
            "borderColor": "#f3bf19"
        })
    }
    //返回p标签对象
    return p
}
//给大盒子对象绑定点击事件
Pagination.prototype.docidaci=function(){
    this.ele.onclick=(e)=>{
        var pagenum=this.default.pageInfo.pagenum
        var totalpage=this.default.pageInfo.totalpage
        //事件对象兼容
        var e = e || window.event
        //目标兼容
        var target=e.target || e.srcElement
        //判断当前点击的是否为下一页
        if(target.className=="next" && pagenum!=totalpage){
            this.default.pageInfo.pagenum=(pagenum+1)
            //重新渲染页面
            this.show1()
        }
        //判断点击的是否为上一页
        if(target.className=="prev" && pagenum!=1){
            this.default.pageInfo.pagenum=(pagenum-1)
            this.show1()
        }
        //判断点击的是否为首页
        if(target.className=="first" && pagenum!=1){
            this.default.pageInfo.pagenum=1
            this.show1()
        }
        //判断点击的是否为尾页
        if(target.className=="last" && pagenum!=totalpage){
            this.default.pageInfo.pagenum=totalpage
            this.show1()
        }
        //判断点击的是否为页码
        if(target.nodeName=="P" && target.innerHTML!=pagenum){
            this.default.pageInfo.pagenum=parseInt(target.innerHTML)
            this.show1()
        }
        //判断点击的是否为btn按钮
        if(target.innerHTML=="GO" && target.previousElementSibling.value!=pagenum){
            //获取输入框的页码
            var mm=target.previousElementSibling.value
            this.default.pageInfo.pagenum=parseInt(mm)
            this.show1()
        }
    }
}
//给元素对象添加样式
function styleCss(ele,o2){
    //遍历o2对象
    for(var attr in o2){
        ele.style[attr]=o2[attr]
    }
}